<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="所属事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="所属品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="请选择"
								clearable
								filterable
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="人员">
							<cl-select
								v-model="search.operator_id"
								placeholder="全部"
								filterable
								collapse-tags
							>
								<el-option
									v-for="item in userList"
									:key="item.user_id"
									:label="item.user_name"
									:value="item.user_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="落地页标题">
							<el-input
								v-model="search.keyword"
								placeholder="请输入落地页标题"
								clearable
								style="width: 200px"
								@change="refresh"
							/>
						</cl-filter>
					</cl-filter-group>
				</el-row>
			</template>
			<el-row>
				<!-- 数据表格 -->
				<cl-table v-bind="table">
					<cl-empty slot="empty" />
					<template #column-type="{ scope: { row } }">
						<div v-if="row.type === 1" class="type_color_normal">正常</div>
						<div v-if="row.type === 2" class="type_color_flowPool">客服组</div>
						<div v-if="row.type === 3" class="type_color_bule">城市客服组</div>
					</template>
					<template #column-cus_service="{ scope: { row } }">
						<span
							v-for="(item, index) in row.customer"
							:key="index"
							:class="{ 'color-danger': contactDisable(item) }"
						>
							{{ item.user_name }}({{ item.contact_type_desc }}:{{ item.contact }})
							<el-button type="text" @click="delCus(item, index, row.customer)"
								>移除;</el-button
							>
						</span>
					</template>
					<template #column-mp_title="{ scope: { row } }">
						<span
							v-for="(item, index) in row.minis"
							:key="index"
							:class="{ 'color-danger': item.status != 1 }"
						>
							{{ item.name }}
							<el-button type="text" @click="delMinId(item, index, row)"
								>解绑;</el-button
							>
						</span>
					</template>
					<template #column-mini_id_name="{ scope: { row } }">
						<span
							v-if="row.mp_title"
							:class="[row.mp_status != 1 ? 'color-red' : '']"
							>{{ row.mp_title }}</span
						>
					</template>
					<template #column-opt="{ scope: { row } }">
						<div class="flex flex-align-start">
							<template v-if="row.type == 1">
								<!-- <el-button
										type="primary"
										@click="openCityForm(row)"
									>
										设置城市
									</el-button> -->
								<el-button
									v-if="row.contact_type == 5"
									type="primary"
									@click="flowPoolOpen(row)"
								>
									绑定客服组
								</el-button>
								<el-button
									type="success"
									v-if="$auth('store_landinglandinglist_link')"
									:disabled="!row.customer.length && !row.pool_name"
									@click="openLink(row)"
								>
									链接
								</el-button>
								<!-- <el-button
										type="danger"
										v-if="$auth('store_landinglandinglist_bdfxs')"
										@click="bindDistributor(row)"
									>
										绑定广告账户
									</el-button> -->
							</template>
							<el-button
								type="warning"
								:disabled="!$auth('store_landinglandinglist_edit')"
								@click="edit(row)"
								>修改</el-button
							>
							<el-button
								type="danger"
								:disabled="!$auth('store_landinglandinglist_del')"
								@click="remove(row)"
								>删除</el-button
							>
						</div>
					</template>
				</cl-table>
			</el-row>
			<cl-dialog
				title="绑定客服组"
				width="300px"
				:visible.sync="visible"
				:before-close="flowPoolClose"
				@close="flowPoolClose"
				:props="{
					top: '200px',
					appendToBody: true,
					closeOnClickModal: false
				}"
			>
				<el-form ref="form" label-position="top" :model="poolForm" :rules="poolRules">
					<el-form-item label="客服组" prop="wx_pool_id">
						<cl-select
							v-model="poolForm.wx_pool_id"
							style="width: 100%"
							placeholder="请选择客服组"
							filterable
							clearable
						>
							<el-option
								v-for="item in poolList"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							/>
						</cl-select>
					</el-form-item>
				</el-form>
				<template #footer>
					<el-button @click="flowPoolClose">关闭</el-button>
					<el-button type="primary" :loading="saving" @click="poolSubmit">确定</el-button>
				</template>
			</cl-dialog>
			<template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<!-- 分页控件 -->
					<zm-pagination />
				</el-row>
			</template>
		</cl-pagefull>
		<land-form ref="landForm" editing @confirm="refresh(false)" />
	</cl-crud>
</template>

<script>
import { validate } from "@/utils/validate";
import LandForm from "./land-form";
export default {
	name: "land-list",
	inject: ["parent"],
	components: {
		LandForm
	},
	data() {
		return {
			visible: false,
			saving: false,
			poolList: [],
			poolForm: {
				id: "",
				wx_pool_id: "",
				bra_id: ""
			},
			poolRules: {
				// wx_pool_id: [{ required: true, message: "请选择需要绑定的id" }],
				bra_id: [{ required: true, message: "当前落地页id无绑定品牌" }]
			},
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [
					{ label: "ID", prop: "id", width: 100, fixed: true },
					{
						label: "事业部",
						prop: "biz_name",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "品牌", prop: "bra_name", minWidth: 80, align: "left" },
					{
						label: "标题",
						prop: "name",
						minWidth: 220,
						align: "left",
						showOverflowTooltip: true
					},

					{
						label: "运营人员",
						prop: "operator_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true,
						formatter: row => (row.type == 2 ? "-" : row.operator_name)
					},
					// { label: "服务客服", prop: "cus_service", align: "left", minWidth: 200 },
					{
						label: "广告账户ID",
						prop: "id_supplier",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "客服码类型",
						prop: "contact_type_name",
						align: "center",
						minWidth: 120
					},
					{
						label: "类型",
						prop: "type",
						minWidth: 150,
						align: "center",
						showOverflowTooltip: true
					},
					{
						label: "绑定客服组",
						prop: "pool_name",
						minWidth: 250,
						align: "left",
						showOverflowTooltip: true
					},
					// {
					// 	label: "推广城市",
					// 	prop: "open_citys_name",
					// 	minWidth: 250,
					// 	align: "left",
					// 	showOverflowTooltip: true,
					// 	formatter: row =>
					// 		row.type == 3 ? row.wx_pool_city_name : row.open_citys_name
					// },
					// {
					// 	label: "绑定小程序",
					// 	prop: "mp_title",
					// 	minWidth: 200,
					// 	align: "left"
					// },
					{ label: "操作", prop: "opt", width: 310, fixed: "right" }
				]
			},
			search: {
				keyword: "",
				biz_id: "",
				bra_id: "",
				operator_id: ""
			},
			brandList: [], //品牌列表
			userList: [], //组员
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		// this.getBrandList();
		this.init();
	},
	methods: {
		async init() {
			const { biz_id } = this.search;
			this.getBizRefBrand(biz_id);
			this.getUserList();
		},
		poolSubmit() {
			this.$refs.form.validate(async (valid, errors) => {
				// this.showFormErr(errors);
				if (!valid) return;
				this.$service.ad
					.setWPool(this.poolForm)
					.then(res => {
						this.$message.success("操作成功");
						this.visible = false;
						this.saving = false;
					})
					.catch(err => {
						this.$message.error("操作失败");
					});

				this.refresh();
			});
		},
		flowPoolClose() {
			this.visible = false;
		},
		beforeClose(done) {
			!this.saving && done();
		},
		flowPoolOpen(row) {
			this.poolForm.id = "";
			this.poolForm.wx_pool_id = "";
			this.poolForm.bra_id = "";
			this.visible = true;
			this.$service.ad.getWxPool({ biz_id: row.biz_id, bra_id: row.bra_id }).then(res => {
				this.poolList = res;
			});
			this.poolForm.id = row.id;
			this.poolForm.bra_id = row.bra_id;
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.ad).done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh(reset = true) {
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
		},
		changeBiz() {
			this.search.bra_id = "";
			this.getBrand();
			this.refresh();
		},
		//获取品牌
		async getBrand() {
			const { biz_id } = this.search;
			const data = await this.getBizRefBrand(biz_id);
			this.search.bra_id = data.length == 1 ? data[0]?.bra_id ?? "" : "";
		},
		// async getBrandList() {
		// 	const { biz_id } = this.search;
		// 	this.brandList = [];
		// 	if (!biz_id) return;
		// 	const data = await this.$service.brand.usermanage({
		// 		biz_id
		// 	});
		// 	this.brandList = data;
		// },
		contactDisable(item) {
			return item.ad_close_date != 1 || item.banci != 0;
		},
		// 移除客服
		async delCus(item, index, list) {
			this.confirm()
				.then(async () => {
					let params = {
						...item,
						type: 1
					};
					await this.$service.ad.cusDel(params);
					this.$message.success("操作成功");
					// this.refresh();

					list.splice(index, 1);
				})
				.catch(() => {});
		},
		// 解绑小程序
		async delMinId(item, index, row) {
			this.confirm()
				.then(async () => {
					let params = {
						id: row.id,
						mini_id: item.id
					};
					await this.$service.ad.cancelPoolMini(params);
					this.$message.success("操作成功");
					// this.refresh();

					row.mini_id.splice(index, 1);
					row.minis.splice(index, 1);
				})
				.catch(() => {});
		},

		// 链接
		openLink(row) {
			this.parent.openLink(row);
		},
		// 更多
		onCommand(command, row) {
			this[command](row);
		},
		//修改
		edit(row) {
			this.parent.openLandForm(true, row);
		},
		// 删除
		remove({ id }) {
			this.confirm()
				.then(async () => {
					await this.$service.ad.remove({ id });
					this.$message.success("操作成功");
					this.refresh();
				})
				.catch(() => {});
		},
		//绑定广告账户

		openMiniProgram(item) {
			this.$refs.bindProgramForm.open(item);
		},
		openCityForm(item) {
			this.$refs.bindCityForm.open(item);
		},
		async getUserList() {
			const { biz_id } = this.search;
			this.userList = [];
			if (!biz_id) return;
			const data = await this.$service.user.deptuserlists({
				biz_id,
				post: 4,
				manage_user: 1
			});
			this.userList = data;
		},
	}
};
</script>
<style lang="scss" scoped>
.type_color_normal {
	text-align: center;
	color: #156dff;
	width: 40%;
	/* height: 26px; */
	border: 0.5px solid;
	margin: auto;
}
.type_color_flowPool {
	text-align: center;
	color: #18eca2;
	width: 40%;
	/* height: 26px; */
	border: 0.5px solid;
	margin: auto;
}
.type_color_bule {
	text-align: center;
	color: #f56c6c;
	width: 60%;
	/* height: 26px; */
	border: 0.5px solid;
	margin: auto;
}
</style>
